<template>
    <div class="mymusic">
        <menu-bar v-for="(item,index) in info"  :name="item.name" :icon="item.icon" :count="item.count" :isPlaying="item.isPlaying" :key="item.name"></menu-bar>
        <music-sheet-bar  v-for="(item,index) in sheetsInfo" :name="item.name" :count="item.count" :detail="item.detail" :key="item.name"></music-sheet-bar>
    </div>
</template>

<script>
  import menuBar from './musicMenuBar/musicMenuBar'
  import Sheet from './musicSheet/musicSheet'
  import sheetBar from './musicSheetBar/musicSheetBar'
  import store from '../../store'
  export default {
    name: "my-music",
    data(){
      return {
        info:[
          {name:'我的音乐',count:20,icon:'icon-music',isPlaying:true},
          {name:'最近播放',count:18,icon:'icon-zuijinplay',isPlaying:false},
          {name:'我的电台',count:1,icon:'icon-diantai',isPlaying:false},
          {name:'我的收藏',count:8,icon:'icon-collect',isPlaying:false},
          ]
      }
    },
    computed:{
      sheetsInfo(){
        return store.getters.getAllSheets;
      }
    },
    components:{
      'menu-bar':menuBar,
      'music-sheet-bar':sheetBar,
      'music-sheet':Sheet,
    }
  }
</script>

<style scoped lang="scss">
    @import '../../../static/font-icon/style.css';
    @import '../../../static/style/public';
    .mymusic{
        position:fixed;
        top:$topHeight;
        bottom:$bottomHeight + 1px;
        left:0px;
        right:0px;
        background-color: #f1f1f1;
        overflow-x:auto ;
        -webkit-overflow-scrolling:touch;
        z-index: 5;
    }
</style>
